<template>
  <view style="padding-bottom: 100rpx">
    <view class="flex h-12 px-4 bg-white fixed w-full z-10">
      <view v-for="item in categoryList" :key="item.id" :class="curTab == item.id ? 'curTab' : ''" class="flex-1 flex justify-center" @click="switchTab(item.id)">
        <text class="flex items-center w-max h-full">{{ item.title }}</text>
      </view>
    </view>

    <view class="pt-12">
      <view class="px-4 pb-4" v-for="item in wenList" style="border-bottom: 2rpx solid #ccc">
        <!--<view>-->
          <view class="py-4">{{ item.content }}</view>
          <view class="grid grid-cols-3 gap-2.5">
            <view v-for="(itex, index) in item.image_url" class="aspect-square" @click="previewImage(itex)">
              <image :src="itex" class="w-full h-full"></image>
              <!--<image src='https://fans.qujiaba.com/storage/20240813/FGH1723522703uNXFHn1.png' class="w-full h-full"></image>-->
              <!--<image :src="item" class="w-full h-full"></image>-->
            </view>
          </view>
          <view class="mt-1 text-gray-400">{{ item.create_time }}</view>

          <view class="mt-3 h-12 flex justify-center items-center text-blue-400 border border-solid rounded-xl" @click="copyText(item.content)">复制文字</view>
        <!--</view>-->
      </view>
      <view>
        <uni-load-more :status="loadStatus"> </uni-load-more>
      </view>


    </view>

    <!--海报弹窗-->
    <uni-popup ref="posterPop">
      <view style="width: 600rpx; background: #fff">
        <!--<image class="w-full h-80" src="@/static/image/ava.jpg"></image>-->
        <image class="w-full" :src="posterUrl" style="height: 1016rpx;"></image>
        <view class="py-2 text-center text-sm text-gray-400">
          长按图片保存
        </view>
      </view>

    </uni-popup>

  </view>

  <TabBar></TabBar>

</template>

<script setup lang="ts">
    import { uiwu } from '@/api/interface/interface'
    import { tgurlApi } from '@/api/invitationCode'
    import type { categoryItf, wenanItf, wenanRequestItf } from '@/api/ydoc/type'
    import { categoryApi, wenanApi, posterApi } from '@/api/ydoc/index'
    import {ref, onMounted, nextTick, watch} from 'vue'
    import TabBar from '@/components/TabBar.vue'
    import { onReady, onReachBottom } from "@dcloudio/uni-app"
    const curTab = ref<number>(1)

    onReady(() => {
      uni.hideTabBar()
    })

    const loadStatus = ref('loading')
    const switchTab = (tabNumber: number) => {
      curTab.value = tabNumber
      /** 重置 **/
      wenQueryParams.value.page = 1
      wenList.value = []
      loadStatus.value = 'loading'
      /** end **/
      wenQueryParams.value.cate_id = tabNumber
      getWenanList()
    }

    /** 文案请求参数 **/
    const wenQueryParams = ref<wenanRequestItf>({
      page: 1,
      limit: 5,
      cate_id: ''
    })

    const categoryList = ref<categoryItf[]>([])
    const wenList = ref<wenanItf[]>([])
    const total = ref<number>(0)
    onMounted(async () => {
      // 请求文案分类
      const rew = await categoryApi()
      categoryList.value = rew.data
      curTab.value = rew.data[0]?.id
      wenQueryParams.value.cate_id = rew.data[0].id

      getWenanList()
    })
    // 请求文案列表
    const getWenanList = async () => {
      const res = await wenanApi(wenQueryParams.value)
      const pageWenList = res.data.data
      total.value = res.data.total

      /** 图片拼接---域名 **/
      pageWenList.forEach(item => {
        item.image_url = item.image_url.split('|')
        // console.log(item.image_url)
        for(let i in item.image_url) {
          item.image_url[i] = 'https://fans.qujiaba.com' + item.image_url[i]
        }
      })
      wenList.value = [...wenList.value, ...pageWenList]
      loadStatus.value = 'noMore'
    }


    const posterUrl = ref<string>('')
    const posterPop = ref()
    const previewImage = async(imageUrl) => {
      // console.log('imageUrl===', imageUrl)
      uni.showLoading()
      const rep = await tgurlApi()
      const { tgurl } = rep.data
      const res = await posterApi({
        bg_img_src: imageUrl,
        code_img_src: tgurl
      })

      posterUrl.value = res.data.url
      uni.hideLoading()
      posterPop.value.open()

    }

    /** 复制文字 **/
    const copyText = (content) => {
      uiwu.copy(content)
    }

    /** 加载更多 **/
    onReachBottom(() => {
      if( wenList.value.length < total.value ) {
        loadStatus.value = 'loading'
        wenQueryParams.value.page += 1
        getWenanList()
      }

    })

</script>

<style scoped lang="scss">
page {
  min-height: calc(100vh - 50px);
  background: #f5f5f5;
}

.curTab {
  color: #2564eb;
  text {
    border-bottom: 2rpx solid #2564eb;
  }
}

//.box {
//  display: grid;
//  grid-template-columns: repeat(3, 1fr);
//  gap: 10px;
//}
</style>
